import React, { useEffect, useState } from "react";
import { cartlistAPI, shopcartAPI } from "./services/products";
import { Button, Space, Checkbox, Toast } from 'antd-mobile'
function Cart() {
  const [list, setList]: any = useState([])
  useEffect(() => {
    cartlistAPI().then((res) => setList(res.data.list))
  },
    [])
  return (
    <div>
      {list.map((item: any) => (
        <Checkbox key={item.id} style={{
          '--icon-size': '18px',
          '--font-size': '14px',
          '--gap': '6px',
        }} >
          <div style={{ display: "flex", justifyContent: "space-around" }}>
            <img src={item.medicine.image} alt="" />
            <div>
              {item.medicine.name}
              <Space>
                <p>数量 ：<Button size="mini" color="primary" onClick={async () => {
                  const jia = await shopcartAPI({ amount: 1, medicine: item.medicine.id, prcie: item.medicine.price })
                  if(jia.success){
                    Toast.show({
                      icon: 'success',
                      content: '数量加一'
                    })
                  }else{
                    Toast.show({
                      icon: 'fail',
                      content: '数据异常'
                    })
                  }

                  location.reload();
                }} >+</Button>{item.amount}<Button size="mini" onClick={async () => {
                  const jian = await shopcartAPI({ amount: -1, medicine: item.medicine.id, prcie: item.medicine.price })
                  console.log(jian);
                  if(jian.success){
                    Toast.show({
                      icon: 'success',
                      content: '数量减一'
                    })
                  }else{
                    Toast.show({
                      icon: 'fail',
                      content: '数据异常'
                    })
                  }
                  location.reload();
                }}>-</Button> </p>
              </Space>
              <p>价格：{item.medicine.price}￥ </p>
              <p>合价：{Math.floor(item.amount * item.medicine.price)} ￥</p>
            </div>
          </div>
        </Checkbox>
      ))}
    </div>
  )

}
export default Cart;
